﻿@page "/team"
@inherits TscComponentBase

<PageTitle>@I18n.Team("ProjectTeam")</PageTitle>

<div class="d-flex align-center" style="overflow:auto;">
    <div class="flex-grow-1" style="min-width:220px;width:calc(100% - 750 px)">
        <ProjectTabs Value="@_projectType" ValueChanged="ProjectTypeChangedAsync" />
    </div>
    <div class="mx-6">
        <SSearch @bind-Value="@_search" OnEnter="OnSearchChangedAsync" Style="width:220px !important;" BackgroundColor="white" />
    </div>
    <SDateTimeRangeToolbar OnUpdate="OnDateTimeUpdateAsync"
                          ShowInterval ShowQuickChange ShowTimeZoneSelector
                          OnAutoUpdate="OnAutoDateTimeUpdateAsync"
                          @bind-DefaultQuickRange="ConfigurationRecord.DefaultQuickRangeKey"
                          @bind-Interval="ConfigurationRecord.Interval"
                          @bind-UseAbsoluteTime="ConfigurationRecord.UseAbsoluteTime" />
</div>

<MCard Class="d-flex mt-8" Style="min-width:464px">
    <MRow Class="overflow-auto d-flex justify-space-between pt-8" Style="min-height: calc(100vh - 200px);" NoGutters>
        @if (_isLoading)
        {
            <LoadingData Class="col" />
        }
        else
        {
            if (_projects == null || !_projects.Any())
            {
                <SEmptyPlaceholder />
            }
            else
            {
                <MCol Style="min-width:220px" class="d-flex justify-center align-start">
                    <HoneyCombGridItem Data="_projectViewDatas" CellBackStyle="CellBackBackgroundStyle" CellBorderColor="CellBorderColor" TItem="ProjectOverviewDto">
                        <CellBack>
                            <div class="d-flex flex-column align-center pt-7">
                                <span class="d-inline-block text-truncate masa h8 my-1 @GetHexTitleClass(context.Status)" style="width:120px;margin:6px 0;">@context.Name</span>
                                @foreach (var app in context.Apps.Take(3))
                                {
                                    if (app.Status == MonitorStatuses.Normal)
                                    {
                                        <span @onmouseover="()=>SetAppId(app.Id)" @onmouseout="()=>SetAppId(string.Empty)" class="masa regular2--text body2 d-inline-block text-truncate text-center cell-item rounded-sm" @onclick="@(()=>OnProjectServiceClick(context,app))">@app.Name</span>
                                    }
                                    else
                                    {
                                        <span @onmouseover="()=>SetAppId(app.Id)" @onmouseout="()=>SetAppId(string.Empty)" class="@ChipLabelClass(app) masa regular2--text body2 d-inline-block text-truncate text-center cell-item rounded-sm" @onclick="@(()=>OnProjectServiceClick(context,app))">@app.Name</span>
                                    }
                                }
                                @if (context.Apps.Count > 3)
                                {
                                    <MTooltip Bottom>
                                        <ActivatorContent Context="tooltipContext">
                                            <i @attributes="@tooltipContext.Attrs" class="m-icon theme--light mdi mdi-dots-horizontal regular2--text rounded-circle cell-item text-truncate" style="font-size:16px;width:36px;height:36px;" @onclick="@(()=>OnProjectServiceClick(context,context.Apps.First()))" @onmouseover='()=>SetAppId("more")' @onmouseout="()=>SetAppId(string.Empty)"></i>
                                        </ActivatorContent>
                                        <ChildContent>
                                            <span>@I18n.T("More")</span>
                                        </ChildContent>
                                    </MTooltip>
                                }
                            </div>
                        </CellBack>
                        <CellHoverTip>
                            <div style="background-color:transparent;@(_hoverAppId=="more"?"display:none":"")">
                                <MCard Class="emphasis2" Width="240" style="border-radius: 12px;">
                                    <MCardText Class="d-flex flex-column white--text masa body">
                                        @if (string.IsNullOrWhiteSpace(_hoverAppId))
                                        {
                                            <div class="d-flex">
                                                <span class="h8">@context.Name</span>
                                                <span class="h8 ml-auto">@context.Apps.Count</span>
                                            </div>
                                            <span class="caption">@context.Identity</span>
                                        }
                                        else
                                        {
                                            var app = @context.Apps.FirstOrDefault(p => p.Id == _hoverAppId);
                                            if (app != null)
                                            {
                                                <span class="h8">@app.Name</span>
                                                <span class="caption">@app.Identity</span>
                                            }
                                        }
                                    </MCardText>
                                </MCard>
                                <div class="d-flex justify-center" style="margin-top: -10px;margin-bottom:10px;">
                                    <div style="width: 0;height: 0;border-style: solid;border-width: 0 20px 20px 0;border-color: transparent transparent #323D6F transparent;transform: rotate(315deg);"></div>
                                </div>
                            </div>
                        </CellHoverTip>
                    </HoneyCombGridItem>
                </MCol>
                <MCol Style="max-width:266px">
                    <MonitorCard Class="ml-8" Data=_appMonitorDto @bind-Value="@ProjectStatus" />
                </MCol>
            }
        }
    </MRow>
</MCard>

<TeamProjectDialog @bind-Visible="ConfigurationRecord.TeamProjectDialogVisible" ConfigurationRecord="ConfigurationRecord" />
